<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块元素和内联元素</title>
</head>
<body>

    <!--

        块级元素：
        div就是一个块级元素，所谓的块级元素就是会独占一行的元素，无论它的内容有多少，它都会独占一行。
        p元素也是一个块级元素
        h1元素表示也是一个块级元素

        div这个标签没有任何语义，就是一个纯粹的块级元素，并且不会为它里面的元素设置任何的默认样式。
        div元素主要用来对页面进行布局的

    -->
   <div style="background-color: red; width: 200px">我是一个div</div>
   <div style="background-color: blue; width: 200px">我是一个div</div>
   <p style="background-color: red; width: 200px">我是一个p元素</p>
   <p style="background-color: red; width: 200px">我是一个p元素</p>

    <!--

        内联元素（行内元素）：
        span是一个内联元素，所谓的内联元素，指的是只占自身大小的元素，不会占用一行

        常见的内联元素：a img iframe spam

    -->
    <span style="background-color: red; width: 200px">我是第一个span标签</span>
    <span style="background-color: red; width: 200px">我是第二个span标签</span>

    <!--
        块元素主要用来做页面中的布局，内联元素主要用来选中文本中设置的样式
        一般情况下我们只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素

        ps： a元素可以包含任意元素，例如 a标签中可以继续嵌套div标签，也可以嵌套span标签等，但是a标签中不能继续包含一个a标签了。
             p元素虽然是一个块元素，但是它不可以包含任何的其他块元素
    -->
</body>
</html>